import styled from "styled-components";

const Wrapper = styled.div`
    .card {
        margin: 11px;
        width: 255px;
        height: 234px;
        background: rgb(255, 255, 255);
        border: 1px solid rgb(226, 230, 237);
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    
    .header-info .time {
        opacity: 0.6;
        font-size: 12px;
        text-align: left;
    }

    .header-info .name {
        margin-top: 3px;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium, serif;
        font-weight: 500;
        text-align: left;
        color: rgb(255, 255, 255);
        line-height: 32px;
    }

    .header-info .classname {
        font-family: PingFangSC, PingFangSC-Medium, serif;
        font-weight: 500;
        text-align: left;
        color: rgb(255, 255, 255);
        line-height: 24px;
    }

    .header-info .qrcode {
        margin-top: 18px;
        display: flex;
        position: relative;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium, serif;
        font-weight: 500;
        text-align: left;
        color: rgb(255, 255, 255);
        line-height: 16px;
    }

    .header-info .qrcode img {
        display: block;
        width: 14px;
        margin-right: 8px;
        border: none;
    }

    .content-info {
        cursor: pointer;
        height: 40px;
        padding: 0 20px 16px;
    }

    .user-info {
        font-family: PingFangSC, PingFangSC-Regular, serif;
        font-weight: 400;
        text-align: left;
        color: rgb(60, 64, 67);
        display: flex;
        justify-content: space-between;
        height: 40px;
        padding: 8px 14px 12px;
        font-size: 12px;
        line-height: 16px;
    }

    .user-info .left, .user-info .right {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .user-info .right .more {
        position: relative;
        bottom: 4px;
        left: 7px;
    }
`;
export default Wrapper;